<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <ul>
        <li><span>姓：</span><input type="text" v-model="firstName"></li>
        <li><span>名：</span><input type="text" v-model="lastName"></li>
        <li><span>全名：</span><input type="text" v-model="fullName"></li>
    </ul>
</div>
<script src="../../JavaScript/vue.js"></script>
<script>
    /*
    computed:用于声明要在组件实例上暴露的计算属性（计算属性会基于内部的响应式依赖进行缓存，当内部所依赖的数据发生变化时计算属性会自动重新进行求值）
    该选项接收一个对象，其中键是计算属性的名称，值是一个计算属性 getter，或一个具有 get 和 set 方法的对象 (用于声明可写的计算属性)。
    所有的 getters 和 setters 会将它们的 this 上下文自动绑定为组件实例。
    注意，如果你为一个计算属性使用了箭头函数，则 this 不会指向该组件实例，不过你仍然可以通过该函数的第一个参数来访问实例
    * */
    const app = Vue.createApp({
        data() {
            return {
                firstName: "陶",
                lastName: "品奇",
            }
        },
        computed: {
            fullName: {
                // 当读取fullName时触发get函数
                get() {
                    return this.firstName + ' ' + this.lastName
                },
                // 当修改fullName时触发set函数并且传入newValue和oldValue
                set(newValue, oldValue) {
                    const newName=newValue.split(' ')
                    this.firstName=newName[0]
                    this.lastName=newName[1]
                }
            }
        }
    })
    app.mount("#app")
</script>
</body>
</html>